<template>
    <!-- 注册页面整体容器，设置为全屏且垂直水平居中 -->
    <div style="height:100vh; background-color: #0f9876; display:flex; align-items: center; justify-content: center">
        <!-- 注册卡片容器，50%宽度，白色背景 -->
        <div style="width: 50%; display: flex; background-color: white; border-radius: 5px; overflow: hidden">
            <!-- 左侧图片区域 -->
            <div style="flex: 1">
                <img src="@/assets/register.png" style="width: 100%"/>
            </div>
            <!-- 右侧注册表单区域 -->
            <div style="flex: 1; display: flex; align-items: center; justify-content: center">
                <!-- 注册表单，使用Element UI的表单组件，绑定数据和验证规则 -->
                <el-form style="width: 80%" :model="user" :rules="rules" ref="registerRef">
                    <!-- 表单标题 -->
                    <div style="font-size: 20px; font-weight: bold; text-align: center;margin-bottom: 20px">欢迎注册后台管理系统</div>
                    <!-- 用户名输入框 -->
                    <el-form-item prop="username">
                        <el-input prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="user.username"/>
                    </el-form-item>
                    <!-- 密码输入框 -->
                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-lock" show-password placeholder="请输入密码" v-model="user.password"/>
                    </el-form-item>
                    <!-- 确认密码输入框 -->
                    <el-form-item prop="confirmpass">
                        <el-input prefix-icon="el-icon-lock" show-password placeholder="请确认密码" v-model="user.confirmpass"/>
                    </el-form-item>
                    <!-- 注册按钮 -->
                    <el-form-item>
                        <el-button type="primary" style="width: 100%" @click="register">注册</el-button>
                    </el-form-item>
                    <!-- 底部链接区域 -->
                    <div style="display: flex">
                        <div style="flex: 1">已有账号吗？请<span style="color: #0f9876; cursor: pointer" @click="$router.push('/login')">登录</span></div>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "register",

        data() {
            // 自定义密码确认验证规则
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入确认密码'));
                } else if(value != this.user.password){
                    callback(new Error('两次密码不一致'));
                } else {
                    callback()
                }
            }
            return {
                // 用户表单数据
                user: {
                    username:'',      // 用户名
                    password:'',      // 密码
                    confirmpass:''    // 确认密码
                },
                // 表单验证规则
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},  // 用户名必填
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},    // 密码必填
                    ],
                    confirmpass: [
                        { validator: validatePass, trigger: 'blur' }  // 确认密码自定义验证
                    ],
                }
            }
        },
        methods: {
            // 获取验证码方法（未使用）
            getCode(code){
                // console.log(code)
                this.code = code.toLowerCase()  // 转小写存储
            },
            // 注册方法
            register() {
                // 表单验证
                this.$refs["registerRef"].validate((valid) => {
                    if (valid) {
                        // 验证成功，才进行注册操作
                        // console.log(this.code)
                        // 发出注册请求到后端
                        this.$request.post('/register', this.user).then(res=>{
                            // console.log(res)
                            if(res.code=='200'){
                                // 注册成功，跳转到登录页面
                                this.$router.push('/login')
                                // 显示成功消息
                                this.$message.success("注册成功")
                            }else {
                                // 注册失败，显示错误消息
                                this.$message.error("注册失败")
                            }
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped>
/* 可以在这里添加组件特定的样式 */
</style>